<template>
	<view class="retrieval-write-offs">
		<view class="search-wrapper flex-align">
			<view class="flex-grow-1 flex-align input">
				<van-icon name="search" size="18" color="rgb(25,25,25)" />
				<input v-model="searchValue" placeholder="手机号/卡号" class="flex-grow-1" @confirm='search' />

			</view>
			<!-- <van-dropdown-menu>
				<van-dropdown-item title="筛选" ref="filter">
					<filter-list :filterList="filterList" @confirm="onConfirm" @reset="onReset" />
				</van-dropdown-item>
			</van-dropdown-menu> -->
		</view>

		<view class="section_1">
			<view class="user flex-align" v-if="uInfolist != ''">
				<view style="margin-right: 20rpx;">
					<!-- <van-image width="80rpx" height="80rpx" round /> -->
					<image :src="uInfolist.head_pic" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50% 50%;">
					</image>
				</view>
				<view>
					<view class="flex-align">
						<view class="user-name">{{uInfolist.username}}</view>
						<!-- <view class="sex">{{uInfolist}}</view> -->
					</view>
					<view class="tel">{{uInfolist.phone}}</view>
				</view>
			</view>

			<view class="list" v-if="list != ''">
				<view v-for="(item, index) in list" :key="index" class="item flex-align"
					:class="{ active: active === index }" @click="write_off(item,index)">
					<!-- <view style="margin-right: 20rpx;">
						<van-image width="65rpx" height="65rpx" round />
					</view> -->
					<view class="flex-grow-1">
						<!-- <view class="flex-align">
							<view class="text_11">{{item.code_name}}</view>
							<van-image
								width="16rpx"
								height="25rpx"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391246926962761823.png"
							/>
						</view> -->
						<view class="flex-space-between" >
							<text class="text_12">{{item.code_name}}</text>
							<text class="text_13">{{item.venue_name}}</text>
						</view>
						<view class="flex-space-between" style="margin-top: 20rpx;">
							<text class="text_12">{{item.code_no}}</text>
							<text class="text_13">余次：{{item.code_less}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="btn">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)"
				@click="onClick">去核销</van-button>
		</view> -->
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class=""
				style="width: 45%;height: 80rpx;background: #ffffff;color: #635df7;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#635df7 1rpx solid">
				重置
			</view>
			<view class="" @click="onClick"
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246));
				border-radius: 80rpx 80rpx;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				去核销
			</view>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				searchValue: '',
				filterList: [{
						label: '时间范围',
						prop: 'time',
						type: 'select-btn',
						options: [{
								label: '今日',
								value: 0
							},
							{
								label: '本月',
								value: 1
							},
							{
								label: '本年',
								value: 2
							},
						]
					},
					{
						label: '所属部门',
						prop: 'dept',
						type: 'select-btn',
						options: [{
								label: '1号馆',
								value: 0
							},
							{
								label: '2号馆',
								value: 1
							},
							{
								label: '3号馆',
								value: 2
							},
							{
								label: '4号馆',
								value: 3
							},
						]
					},
					{
						label: '产品分类',
						prop: 'classify',
						type: 'select-btn',
						options: [{
								label: '课程',
								value: 0
							},
							{
								label: '门票',
								value: 1
							},
							{
								label: '会员卡',
								value: 2
							},
							{
								label: '商品',
								value: 3
							},
							{
								label: '场地',
								value: 4
							},
						]
					},
				],
				active: '',
				op: '',
				searchKey: "", //搜索关键词
				val: '',
				list: [],
				uInfolist: '',
				code_no: ''
			}
		},
		onLoad(options) {
			this.op = options.op
		},
		methods: {
			// 搜索字
			search(val) {
				this.val = val.detail.value
				this.info();
			},
			async info() {
				let that = this;
				let data = {
					code_no: this.val,
					op: this.op,
				};
				let result = await venues.info(data);
				if (result.code == 1) {
					this.list = result.data.list
					this.uInfolist = result.data.uInfo
				}
			},
			write_off(item, index) {
				if (this.active ==index) {
					this.active = null;
					this.code_no = item.code_no
				} else {
					this.active = index
					this.code_no = item.code_no
				}
			},
			onConfirm(filterData) {
				this.$refs.filter.toggle();
			},
			onReset() {
				this.$refs.filter.toggle();
			},
			onClick() {
				if (this.code_no == '') {
					uni.showToast({
						title: '选择卡！',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/page_admin/mobile-write-offs/confirm-write-offs/confirm-write-offs?val=' + this.code_no
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.retrieval-write-offs {
		min-height: 100vh;
		background-color: rgb(243, 243, 243);
		padding-bottom: 130rpx;

		.search-wrapper {
			padding: 10rpx 30rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 0px 0px 16rpx 16rpx;

			.input {
				padding: 0 28rpx;
				color: rgb(153, 153, 153);
				font-size: 26rpx;
				background-color: rgba(243, 247, 250, 0.95);
				border-radius: 33rpx;
				height: 66rpx;

				/deep/.van-icon {
					padding: 0 4rpx;
				}
			}

			/deep/.van-dropdown-menu {
				box-shadow: none;
				height: 96rpx;

				.van-dropdown-menu__title {
					color: rgb(99, 93, 247);
				}
			}
		}

		.user {
			padding: 30rpx 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);

			.user-name {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
				margin-right: 10rpx;
			}

			.sex {
				color: rgb(153, 153, 153);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 21rpx;
			}

			.tel {
				margin-top: 20rpx;
				color: rgb(51, 51, 51);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 17rpx;
			}
		}

		.section_1 {
			padding: 20rpx;
		}

		.list {
			margin-top: 20rpx;
			padding: 20rpx 10rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);
			border-radius: 10rpx;

			.item {
				padding: 26rpx 24rpx;
				border-radius: 27rpx;
				border: solid 2rpx rgb(229, 229, 229);

				&+.item {
					margin-top: 30rpx;
				}

				&.active {
					background: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391246929552989118.png') left top/100% 100% no-repeat;
					// border: none;
				}

				.text_11 {
					font-size: 28rpx;
					font-weight: 700;
					line-height: 27rpx;
					margin-right: 30rpx;
				}

				.text_12 {
					font-size: 26rpx;
					font-weight: 500;
					line-height: 24rpx;
				}

				.text_13 {
					// font-weight: bold;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 24rpx;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			padding: 0 40rpx;
		}
	}
</style>